<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t('page.system.userMembership.detail')"
    width="800px"
    :before-close="handleClose"
  >
    <div v-if="membershipData" class="membership-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item :label="$t('page.system.userMembership.userId')">
          <el-tag type="primary">{{ membershipData.userId }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.userMembership.nickName')">
          {{ membershipData.nickName }}
        </el-descriptions-item>
        
        <el-descriptions-item :label="$t('page.system.userMembership.levelName')">
          <el-tag :type="getLevelTagType(membershipData.levelCode || '') as any">
            {{ membershipData.levelName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.userMembership.levelCode')">
          <el-tag type="info">{{ membershipData.levelCode }}</el-tag>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.userMembership.startDate')">
          <span style="color: #67c23a; font-weight: 500;">
            {{ formatDateTime(membershipData.startDate || '') }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.userMembership.endDate')">
          <span style="color: #f56c6c; font-weight: 500;">
            {{ formatDateTime(membershipData.endDate || '') }}
          </span>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.userMembership.status')">
          <el-tag :type="membershipData.status === 1 ? 'success' : 'danger'">
            {{ membershipData.status === 1 ? $t('page.system.userMembership.valid') : $t('page.system.userMembership.invalid') }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('page.system.userMembership.autoRenew')">
          <el-tag :type="membershipData.autoRenew === 1 ? 'success' : 'info'">
            {{ membershipData.autoRenew === 1 ? $t('page.system.userMembership.yes') : $t('page.system.userMembership.no') }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.userMembership.remainingDays')">
          <el-tag :type="getRemainingDaysTagType(membershipData.remainingDays || 0)">
            {{ membershipData.remainingDays }}天
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="'会员状态'">
          <el-tag :type="getMembershipStatusTagType(membershipData.remainingDays || 0, membershipData.status || 0)">
            {{ getMembershipStatusText(membershipData.remainingDays || 0, membershipData.status || 0) }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.userMembership.createdTime')" :span="2">
          {{ formatDateTime(membershipData.createdTime || '') }}
        </el-descriptions-item>

        <el-descriptions-item :label="$t('page.system.userMembership.updatedTime')" :span="2">
          {{ formatDateTime(membershipData.updateTime || '') }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 会员时间轴 -->
      <div class="membership-timeline">
        <h4>会员时间轴</h4>
        <div class="timeline-container">
          <div class="timeline-item">
            <div class="timeline-dot start"></div>
            <div class="timeline-content">
              <div class="timeline-title">会员开始</div>
              <div class="timeline-time">{{ formatDateTime(membershipData.startDate || '') }}</div>
            </div>
          </div>
          
          <div class="timeline-item current">
            <div class="timeline-dot current"></div>
            <div class="timeline-content">
              <div class="timeline-title">当前时间</div>
              <div class="timeline-time">{{ formatDateTime(new Date().toISOString()) }}</div>
              <div class="timeline-info">剩余 {{ membershipData.remainingDays }} 天</div>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-dot end"></div>
            <div class="timeline-content">
              <div class="timeline-title">会员到期</div>
              <div class="timeline-time">{{ formatDateTime(membershipData.endDate || '') }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员进度条 -->
      <div class="membership-progress">
        <h4>会员进度</h4>
        <el-progress 
          :percentage="getMembershipProgress(membershipData.startDate || '', membershipData.endDate || '')"
          :status="membershipData.status === 1 ? 'success' : 'exception'"
          :stroke-width="20"
        />
        <div class="progress-info">
          <span>已使用：{{ getUsedDays(membershipData.startDate || '', membershipData.endDate || '') }}天</span>
          <span>剩余：{{ membershipData.remainingDays }}天</span>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t('page.system.userMembership.cancel') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElButton, ElDescriptions, ElDescriptionsItem, ElDialog, ElProgress, ElTag } from 'element-plus';

import type { UserMembership } from '#/api/system/user-membership';
import { $t } from '#/locales';

interface Props {
  visible: boolean;
  membershipData?: Partial<UserMembership>;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '暂无数据';
  try {
    return new Date(dateTime).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch (error) {
    console.error('日期格式化错误:', error, dateTime);
    return '格式错误';
  }
};

// 获取等级标签类型
const getLevelTagType = (levelCode: string) => {
  const colorMap: { [key: string]: string } = {
    'DUKE': 'danger',     // 公
    'MARQUIS': 'warning', // 侯
    'EARL': 'primary',    // 伯
    'FREE': 'success',    // 民
  };
  return colorMap[levelCode] || 'info';
};

// 获取剩余天数标签类型
const getRemainingDaysTagType = (days: number) => {
  if (days <= 0) return 'danger';    // 已过期
  if (days <= 7) return 'warning';   // 即将过期
  if (days <= 30) return 'primary';  // 一个月内
  return 'success';                  // 充足
};

// 获取会员状态标签类型
const getMembershipStatusTagType = (remainingDays: number, status: number) => {
  if (status === 0) return 'danger';
  if (remainingDays <= 0) return 'danger';
  if (remainingDays <= 7) return 'warning';
  return 'success';
};

// 获取会员状态文本
const getMembershipStatusText = (remainingDays: number, status: number) => {
  if (status === 0) return '已失效';
  if (remainingDays <= 0) return '已过期';
  if (remainingDays <= 7) return '即将过期';
  return '正常';
};

// 计算会员进度百分比
const getMembershipProgress = (startDate: string, endDate: string) => {
  if (!startDate || !endDate) return 0;
  
  const start = new Date(startDate).getTime();
  const end = new Date(endDate).getTime();
  const now = new Date().getTime();
  
  if (now < start) return 0;
  if (now > end) return 100;
  
  const total = end - start;
  const used = now - start;
  
  return Math.round((used / total) * 100);
};

// 计算已使用天数
const getUsedDays = (startDate: string, endDate: string) => {
  if (!startDate || !endDate) return 0;
  
  const start = new Date(startDate).getTime();
  const now = new Date().getTime();
  
  if (now < start) return 0;
  
  const diffTime = now - start;
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  return Math.max(0, diffDays);
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.membership-detail {
  padding: 20px 0;
}

.membership-timeline {
  margin-top: 30px;
}

.membership-timeline h4 {
  margin-bottom: 20px;
  color: #333;
  font-weight: 500;
}

.timeline-container {
  position: relative;
  padding-left: 30px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -23px;
  top: 20px;
  width: 2px;
  height: 40px;
  background: #e4e7ed;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.timeline-dot.start {
  background: #67c23a;
}

.timeline-dot.current {
  background: #409eff;
  animation: pulse 2s infinite;
}

.timeline-dot.end {
  background: #f56c6c;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
  }
}

.timeline-content {
  padding-left: 10px;
}

.timeline-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.timeline-time {
  color: #666;
  font-size: 14px;
  margin-bottom: 3px;
}

.timeline-info {
  color: #409eff;
  font-size: 12px;
}

.membership-progress {
  margin-top: 30px;
}

.membership-progress h4 {
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 
 